<!doctype html>
<html class="no-js">
<head>
<meta charset="utf-8">
<title>{$site_title}</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" >
<link rel="stylesheet" type="text/css" href="http://apps.bdimg.com/libs/blendui/2.0.0/boost.min.css" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/blendui/2.0.0/boost.min.js"></script>
<script type="text/javascript">window.boost = $.noConflict(true);</script>
<style>
* { margin: 0; padding: 0; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
html { font-size: 20px; }

@media only screen and (min-width: 320px) {
html { font-size: 17.0666666667px !important; }
}

@media only screen and (min-width: 360px) {
html { font-size: 19.2px !important; }
}

@media only screen and (min-width: 375px) {
html { font-size: 20px !important; }
}

@media only screen and (min-width: 400px) {
html { font-size: 21.33333333px !important; }
}

@media only screen and (min-width: 414px) {
html { font-size: 22.08px !important; }
}

@media only screen and (min-width: 480px) {
html { font-size: 25.6px !important; }
}

@media only screen and (min-width: 600px) {
html { font-size: 32px !important; }
}

@media only screen and (min-width: 750px) {
html { font-size: 40px !important; }
}
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { /*position: absolute; top: 0; right: 0; bottom: 0; left: 0;*/font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 0.85rem; line-height: 1.5; color: #3d4145; background: #fff;}
a, a:link, a:visited, a:hover, a:active, a:focus { text-decoration: none!important }
img { max-width: 100%; border: 0; }
.text-center { text-align: center; }
.mainpage { width: 100%;/* position: absolute;height: 100%; */min-height:100vh;background: url(__PUBLIC__/acsuzhou/images/yaoyiyao.png) top center no-repeat; -moz-background-size:cover; background-size:cover }
.hand_outside { height: 11.85rem; position: relative; z-index: -1 }
.hand { width: 11.2rem; height: 11.2rem; background: url(__PUBLIC__/acsuzhou/images/hand.png) center no-repeat; background-size: 100% auto; margin: 0 auto; }
.hand-animate { -webkit-animation: hand_move infinite 2s; }
.yaoyiyao_left_chance { width: 100%; background: none; text-align: center; color: #fff; font-weight: 700; line-height: 2.4rem; }
.yaoyiyao_everyday_tip { width: 10rem; height: 1.8rem; line-height: 1.8rem; font-size: 1.0rem; font-weight: bold; color: #fff; text-align: center; background: url(__PUBLIC__/acsuzhou/images/yaoyiyao_everyday_tip.png) center no-repeat; background-size: 100% auto; margin: 0 auto; }
.prize_wrap { margin: 1.0rem auto; }
.prize_wrap .prize { width: 7.2rem; height: 2.0rem; line-height: 2.0rem; background: url(__PUBLIC__/acsuzhou/images/prize-btn.png) center no-repeat; background-size: 100% auto; margin: 0 auto;}
.result { width: 13.5rem; height: 14.925rem; position: absolute; left: 50%; margin-left: -6.75rem; top: 50%; margin-top: -8.75rem; background: url(__PUBLIC__/acsuzhou/images/prize_box_bg.png); -moz-background-size: 100%; background-size: 100%; z-index: 999 }
.result .pic {width:10rem;margin:0 auto;margin-top:3.8rem;}
.result .con { overflow: hidden; zoom: 1; padding-left: 10px; line-height: 24px; }
.result .close {width:0.75rem;height:0.75rem;position:absolute;right:0.65rem;top:1.3rem;}
.result .btns { width:10rem; height:1.4rem;line-height:1.4rem;margin:0.75rem auto;}
#once_again{display:inline-block;width:5.5rem;height:1.6rem;line-height:1.6rem;background: url(__PUBLIC__/acsuzhou/images/again-btn.png) center no-repeat; background-size: 100% auto;color:#fff;font-weight:bold}
.result-show { opacity: 1!important; margin-top: 50px; }
.loading { position: absolute; top: 240px; left: 50%; margin-left: -50px; width: 100px; height: 100px; background: url(__PUBLIC__/acsuzhou/images/spinner.png) no-repeat; background-size: 100px 100px; opacity: 0; -webkit-animation: loading infinite linear .5s; -moz-animation: loading infinite linear .5s; -ms-animation: loading infinite linear .5s; -o-animation: loading infinite linear .5s; animation: loading infinite linear .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
.loading-show { opacity: 1; }
.mask { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 998 }
.bingo { opacity: 0;display:none;}
.bingo-show { opacity: 1!important;display:block; }

 @-webkit-keyframes hand_move {
 0% {
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 -ms-transform: rotate(0);
 -o-transform: rotate(0);
 transform: rotate(0);
}
 50% {
 -webkit-transform: rotate(15deg);
 -moz-transform: rotate(15deg);
 -ms-transform: rotate(15deg);
 -o-transform: rotate(15deg);
 transform: rotate(15deg);
}
 100% {
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 -ms-transform: rotate(0);
 -o-transform: rotate(0);
 transform: rotate(0);
}
}
 @-webkit-keyframes loading {
 0% {
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 -ms-transform: rotate(0);
 -o-transform: rotate(0);
 transform: rotate(0);
}
 100% {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="mainpage">
	<div class="back" style="position:absolute;left:1.4rem;top:1.4rem;"><a href="javascript:history.go(-1);"><img src="__PUBLIC__/acsuzhou/images/back-arrow.png" style="width:1.2rem;height:1.2rem;"></a></div>
	<div class="slogan text-center"><img src="__PUBLIC__/acsuzhou/images/yyy-slogan.png" style="width:11.1rem;margin-top:1.55rem;margin-bottom:1.2rem;"/></div>
	<div class="hand_outside text-center">
		<div id="hand" class="hand hand-animate"></div>
	</div>
	<div class="clearfix"></div>
	<div class="yaoyiyao_left_chance">您还有 <span style="color:#FFE21F">{$lefttime}</span> 次抽奖机会</div>
	<div class="clearfix"></div>
	<div class="yaoyiyao_everyday_tip">您有3次摇奖机会</div>
	<div class="clearfix"></div>
	<div class="prize_wrap text-center">
		<div class="prize"><a href="{:U('prize_result')}" style="font-size:1.2rem;color:#EB2E4A;font-weight:bold">我的奖品</a></div>
	</div>
	<div class="clearfix"></div>
</div>
<div id="loading" class="loading"></div>
<div id="bingo" class="bingo">
	<div id="mask" class="mask"></div>
	<div id="result" class="result">
		<div id="close_btn" class="close"><img src="__PUBLIC__/acsuzhou/images/close-btn.png"></div>
		<div class="pic"><img id="prize_win_img" src="__PUBLIC__/acsuzhou/images/win.png"></div>
		<!--<div class="con">摇晃结果<br/>摇晃结果的其他信息哈哈哈</div>-->
		<div class="clearfix"></div>
		<div class="btns text-center"><span id="once_again">再摇一次</span></div>
	</div>
</div>
<div id="noBingo" class="blend-dialog">
  <div class="blend-dialog-body">没中奖，再接再厉！</div>
  <div class="blend-dialog-footer">
    <a href="javascript:void(0);" class="blend-dialog-confirm">确认</a>
  </div>
</div>
<div id="noChance" class="blend-dialog">
  <div class="blend-dialog-body">亲，你今天的活动参与次数已用光，明天再来呗！</div>
  <div class="blend-dialog-footer">
    <a href="javascript:void(0);" class="blend-dialog-confirm">确认</a>
  </div>
</div>
<audio style="display:none" id="musicBox" preload="metadata"  controls="controls"  src="__PUBLIC__/acsuzhou/5012.mp3"></audio>
<script type="text/javascript" src="{$resource_basic}/js/jquery.min.js"></script>
<script>
	
	boost("#noBingo").dialog();
	boost("#noChance").dialog();
	
    var SHAKE_THRESHOLD = 3000;
    var last_update = 0;
    var x = y = z = last_x = last_y = last_z = 0;
    var shaketime=1;
    
    /*
     * 剩余次数
     */
    var lefttime = {$lefttime};
    
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler, false);
    } else {
        alert('本设备不支持devicemotion事件');
    }

    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity;
        var curTime = new Date().getTime();

        if ((curTime - last_update) > 100) {
            var diffTime = curTime - last_update;
            last_update = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - last_x - last_y - last_z) / diffTime * 10000;
            var status = document.getElementById("status");

            if (speed > SHAKE_THRESHOLD) {
                
                if(shaketime)
                {
                   if(lefttime>0) 
                   {
                       doResult();
                   }
                   else
                   {
                    boost("#noChance").dialog("show").on('dialog:confirm', function(){
                            top.location.reload()
                        });
                   }
                }
                shaketime=0;
                
                
            }
            last_x = x;
            last_y = y;
            last_z = z;
        }
    }

    function doResult() {
        $("#musicBox").trigger('play');
//        ajax 请求是否中奖
        
        $.ajax({
                type:'get',
                url:"{:U('get_prize')}",
                data:"mid="+{$mid},
                dataType:'json',
                success:function(data){
//                    alert("ddd");
//                    alert(data);
                    
                    if(data.content.is_prize===1){
                        document.getElementById("bingo").className = "bingo";
                        document.getElementById("loading").className = "loading loading-show";
                        setTimeout(function(){
                            document.getElementById("bingo").className = "bingo bingo-show";
                            document.getElementById("loading").className = "loading";
                            $("#prize_win_img").attr("src",data.content.prize_thumb);
                        }, 1000);
                    }
                    else
                    {

                        boost("#noBingo").dialog("show").on('dialog:confirm', function(){
                            top.location.reload()
                        });
                        
                    }
                }
            });

        
    }  
	  
    $(function(){
        $("#once_again").click(function(){
            top.location.reload();
        });
        $("#close_btn").click(function(){
			top.location.reload();
        });
    });
	
    </script>
    
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
wx.config({
    debug: false,
    appId: '{$signPackage["appId"]}',
    timestamp: {$signPackage["timestamp"]},
    nonceStr: '{$signPackage["nonceStr"]}',
    signature: '{$signPackage["signature"]}',
    jsApiList: [
      // 所有要调用的 API 都要加到这个列表中
      'onMenuShareTimeline',
      'onMenuShareAppMessage'
    ]
});


wx.ready(function () {
// 在这里调用 API
    wx.onMenuShareTimeline({
        title: '{$school["name"]}食品知识校园行活动', // 分享标题
        link: "{$site_url}{:U('M/Acshiyaoju/xws_rank')}", // 分享链接
        imgUrl: 'http://www.zhongcetianxia.com/Public/template/default/img/acshenzhen/share_icon.jpg', // 分享图标
        success: function () { 
            // 用户确认分享后执行的回调函数，生成红包
            // _system.$("cover").click()

        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });
    
    wx.onMenuShareAppMessage({
        title: '{$school["name"]}食品知识校园行', // 分享标题
        desc: '{$school["name"]}联合众测天下举办小卫士召集令，一起参与领奖品吧', // 分享描述
        link: "{$site_url}{:U('M/Acshiyaoju/xws_rank')}", // 分享链接
        imgUrl: 'http://www.zhongcetianxia.com/Public/template/default/img/acshenzhen/share_icon.jpg', // 分享图标
        type: '', // 分享类型,music、video或link，不填默认为link
        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
        success: function () { 
            // 用户确认分享后执行的回调函数
            // _system.$("cover").click()

        },
        cancel: function () { 
            // 用户取消分享后执行的回调函数
        }
    });

});
</script>
</body>
</html>